<template>
  <div class="singer-item">
    <div class="s-img">
      <img class="auto-img" :src="singerData.picUrl" alt="">
    </div>
    <div class="s-name">{{ singerData.name }}</div>
    <div class="pi" v-if="isPlayIcon" @click="changeAudioId(singerData)">
      <div class="m-icon" @click="changeAudioStatus" >
       <div class="iconcontrol" >
        <!-- <span class="iconfont" :class="[isPlay ? '#play-circle-o' : '#pause-circle-o']"><van-icon name="play-circle-o" /></span> -->
          <span class="iconfont" ><svg class="icon " aria-hidden="true" >
            <use :xlink:href="[currentAudioInfo.audioId === singerData.id && isPlay ? '#icon-zanting' : '#icon-bofang']"> </use>    
          </svg></span>
        </div>
          <!-- <span class="iconfont" :class="[currentAudioInfo.audioId === singerData.id && isPlay ? 'icon-zanting' : 'icon-bofang']"></span> -->
        </div>
    </div>
  </div>
  
</template>

<script>
import { mapMutations, mapState } from 'vuex';
export default {
  name: 'ListItem',
  props: {
    //歌手或者歌曲的数据
    singerData: {
      type: Object,
      default() {
        return {};
      }

    },

    //控制播放图标的显示和隐藏
    isPlayIcon: {
      type: Boolean,
      default: false
    }

  },
 

  computed: {
    ...mapState(['currentAudioInfo', '$audio','isMain', 'isPlay',])
  },

  methods: {
    ...mapMutations(['setAudioId','setAudioPlayStatus','setIsShowPlayPage', ]),

    //修改音频id
    changeAudioId() {

      //判断当前音频的id是否和点击播放的音频id一致
      if(this.currentAudioInfo.audioId === this.singerData.id) {
        // console.log('进来');
        //修改图标状态
        if (this.singerData.isPlay) {
          this.singerData.isPlay = false;
          //vuex, 修改音频播放状态
          this.setAudioPlayStatus(this.singerData.isPlay);
          this.$audio.pause();
        } else {
          this.singerData.isPlay = true;
          //vuex, 修改音频播放状态
          this.setAudioPlayStatus(this.singerData.isPlay);

          this.$audio.play();
          
        }
      } else {
        //触发组件的@changeplay事件通知父组件
        this.$emit('changeplay');

        this.singerData.isPlay = true;

        //vuex, 修改音频播放状态
        this.setAudioPlayStatus(this.singerData.isPlay);

        //vuex, 修改音频id
        this.setAudioId({
          audioId: this.singerData.id,
          singerName: this.singerData.singerName,
          songName: this.singerData.name,
          singerPic: this.singerData.picUrl
        });

        
      }

    },

     //播放暂停音频
      changeAudioStatus() {

    if (this.currentAudioInfo.audioId === '') {
      return;
    }

    this.setAudioPlayStatus(!this.isPlay);
    if (this.isPlay) {
      this.$audio.play();
    } else {
      this.$audio.pause();
}

}
        //     changeAudioStatus() {

        // if (this.currentAudioInfo.audioId === '') {
        //   return;
        // }
        // this.setAudioPlayStatus(!this.isPlay);
        // if (this.isPlay) {
        //   this.$audio.play();
        // } else {
        //   this.$audio.pause();
        // }

        // }
  }
}
</script>

<style lang="less" scoped>
.singer-item {
  display: flex;
  padding: 10px;
  background-color: #fff;
  margin-bottom: 10px;
  align-items: center;

  .s-name {
    margin-left: 10px;
  }

  .s-img {
    border-radius: 50%;
      width: 40px;
      height: 40px;
      background-color: #ddd;
      overflow: hidden;
      box-sizing: border-box;
    

  }

  .pi {
    width: 24px;
    height: 24px;
    background-color: #e8e8e8;
    margin-left: auto;
    text-align: center;
    border-radius: 50%;

    >span {
      font-size: 14px;

      line-height: 24px;
    }
  }
}
</style>